<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
  <script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<style>
  .layui-table-cell,.layui-table-box ,.layui-table-body{
    overflow: visible !important;
  }
  td .layui-form-select {
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
  }
  td .input{
    width: 115px;
    height: 39px;
    margin-top: -9px;
    margin-left: -14px;
  }
  .layui-form-item i{
    display: block;
    margin-top: 10px;
  }
</style>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>采购单管理</li>
    <li>添加</li>
  </ul>
</div>
<form class="layui-form" action="">
<div class="formbody">
  <div class="formtitle"><span>采购单信息</span></div>
    <div class="layui-form-item">
      <label class="layui-form-label">采购单编号</label>
      <div class="layui-input-inline" >
        <input id="number" name="number" type="text" value="" readonly="readonly" class="layui-input" />
      </div>
      <div class="layui-input-inline" >
        <i>自动生成不能编辑</i>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">采购时间</label>
      <div class="layui-input-inline" >
        <input id="poTime" name="poTime" type="text" value="" readonly="readonly" class="layui-input" />
      </div>
      <div class="layui-input-inline" >
        <i>不能编辑</i>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">创建人</label>
      <div class="layui-input-inline" >
        <input id="userPerson" name="userPerson" type="text" value="${sessionScope.user}" readonly="readonly" class="layui-input" />
      </div>
      <div class="layui-input-inline" >
        <i>不能编辑</i>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">审核状态</label>
      <div class="layui-input-inline" >
        <input type="text" value="未审核" readonly="readonly" class="layui-input" />
        <input id="status" name="status" type="hidden" value="1" />
      </div>
      <div class="layui-input-inline" >
        <i>初始状态，不能编辑</i>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">总金额</label>
      <div class="layui-input-inline" >
        <input id="amount" name="amount" type="text" readonly="readonly" class="layui-input" />
      </div>
      <div class="layui-input-inline" >
        <i>自动运算，不能编辑</i>
      </div>
    </div>
</div>
<table id="PurchaseTable" lay-filter="PurchaseTable"></table>
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="selectName" >
  <select name="editName" id="editName">
    <option value="0">请选择</option>
    <option value="品牌">品牌</option>
  </select>
</script>
<script type="text/html" id="selectType" >
  <select name="editType" id="editType">
    <option value="0">请选择</option>
    <option value="类型">类型</option>
  </select>
</script>
<script type="text/html" id="selectMode" >
  <select name="editMode" id="editMode">
    <option value="0">请选择</option>
    <option value="型号">型号</option>
  </select>
</script>
<script type="text/html" id="selectManu" >
  <select name="editManu" id="editManu">
    <option value="0">请选择</option>
    <option value="厂商">厂商</option>
  </select>
</script>
<script type="text/html" id="inputNum" >
  <input type="text" id="num" name="inputNum" autocomplete="off" class="layui-input input">
</script>
<script type="text/html" id="inputUnits" >
  <input type="text" id="units" name="inputUnits" autocomplete="off" class="layui-input input" >
</script>
<script type="text/html" id="inputPrice" >
  <input type="text" id="price" name="inputPrice" autocomplete="off" class="layui-input input" >
</script>
<script type="text/html" id="inputAmounts" >
  <input type="text" id="amounts" name="inputAmounts" autocomplete="off" class="layui-input input" readonly="readonly">
</script>
<script type="text/html" id="toolbarDemo" >
  <div class="layui-btn-container">
    <button type="button" class="layui-btn btn-add" lay-event="add">新增</button>
    <button type="button" class="layui-btn btn-save" lay-event="save">确认</button>
    <button lay-submit lay-filter="formDemo" class="layui-btn btn-add">添加</button>
  </div>
</script>
</form>
<script type="text/javascript">
  layui.use(['table', 'form'], function () {
    var table = layui.table,
            form = layui.form,
            $=layui.jquery;
    form.render();
    $(function () {
      var date = new Date();
      var year = date.getFullYear();
      var day = date.getDate();
      var month = date.getMonth()+1;
      var hour = date.getHours(); //获取系统时
      var minute = date.getMinutes(); //获取系统分
      var second = date.getSeconds();
      $("#number").val("CG"+year+month+day+hour+minute+second);
      $("#poTime").val(date.toLocaleString().replaceAll("/","-"));
      $("#status").val("1");
      $('#amount').val("0");
    })

    //监听提交
    form.on('submit(formDemo)', function(data){
      if($('#amounts').val()!=null&&$('#amounts').val()!=""&&
        $('#editType').val()!=null&&$('#editType').val()!=""&&
      $('#editName').val()!=null&&$('#editName').val()!=""&&
      $('#editManu').val()!=null&&$('#editManu').val()!=""&&
      $('#editMode').val()!=null&&$('#editMode').val()!=""&&
      $('#num').val()!=null&&$('#num').val()!=""&&
      $('#units').val()!=null&&$('#units').val()!=""&&
      $('#price').val()!=null&&$('#price').val()!="") {
        $.ajax({
          url: "/PurchaseOrder/addPurchaseOrder",
          data: JSON.stringify(data.field),
          type: 'post',
          dataType: 'json',
          contentType: "application/json",
          success: function (resp) {
            layer.msg(resp.message, {icon: 6});
            $(function () {
              layer.closeAll();
              table.reload('demo', {
                where: {},
                data: []
              });
              table.reload('PurchaseTable', {
                where: {},
                data: []
              });
            });
          },
          error: function () {
            layer.closeAll();
            layer.msg('系统错误，请联系管理员', {icon: 5});
          }
        });
        return false;
      }else{
        alert("请确认采购单完整");
        return false;
      }
    });
    //展示已知数据
    table.render({
      elem: '#PurchaseTable'
      , url: 'http://localhost:8080/PurchaseOrderDetails/getPurchaseOrderDetailsList?number='+$("#number").val() //数据接口
      , cols: [[ //表头
        {field: 'orderId', title: '序号', width: 115, align: "center"}
        , {field: 'name', title: '品牌', width: 115,align: "center"}
        , {field: 'type', title: '类型', width: 115, align: "center"}
        , {field: 'mode', title: '型号', width: 115, align: "center"}
        , {field: 'manufacturer', title: '厂商', width: 115, align: "center"}
        , {field: 'num', title: '数量', width: 115, align: "center"}
        , {field: 'units', title: '单位', width: 115, align: "center"}
        , {field: 'price', title: '单价', width: 115, align: "center"}
        , {field: 'amounts', title: '金额', width: 116, align: "center"}
      ]]
    });
    form.render();

    //添加数据
    table.render({
      elem: '#demo'
      , title: '数据显示'
      , toolbar: '#toolbarDemo'//开启头部
      , defaultToolbar:false
      , cellMinWidth: 80 //全局定义常规单元格的最小宽度
      , cols: [[ //表头
        {type: 'checkbox', fixed: 'center'}
        , {field: 'orderId', title: '序号', width: 114,align: "center",type: "numbers"}
        , {field: 'name', title: '品牌', width: 115, templet: '#selectName', align: "center"}
        , {field: 'type', title: '类型', width: 115, templet: '#selectType', align: "center"}
        , {field: 'mode', title: '型号', width: 115, templet: '#selectMode', align: "center"}
        , {field: 'manufacturer', title: '厂商', width: 115, templet: '#selectManu', align: "center"}
        , {field: 'num', title: '数量', width: 116, templet: '#inputNum', align: "center"}
        , {field: 'units', title: '单位', width: 116, templet: '#inputUnits', align: "center"}
        , {field: 'price', title: '单价', width: 116, templet: '#inputPrice', align: "center"}
        , {field: 'amounts', title: '金额', width: 116, templet: '#inputAmounts', align: "center"}
      ]]
      ,data:[]
    });
    //头部工具栏事件
    table.on('toolbar(demo)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
              , data = checkStatus.data //获取选中的数据
              , demo = table.cache["demo"];//获取表格中的数据
      switch (obj.event) {
        case 'add':
          //添加时的字段信息
          var datas = {};
          //加入数组中
          demo.push(datas);
          //重载表格
          table.reload('demo', {
            data: demo
          });
          //赋值采购
          $.ajax({
            url: "/PurchaseOrder/getList",
            type: "post",
            dataType: "json",
            success: function(data) {
              //var json = eval("("+data+")");
              var brand = eval("("+data.brand+")");
              var firm =  eval("("+data.firms+")");
              var good =  eval("("+data.good+")");
              var type =  eval("("+data.type+")");

              //使用循环遍历，给下拉列表赋值
              $("#editName").empty();
              $("#editName").append(new Option("请选择",""))
              for(var i=0;i<brand.length;i++){
                $("#editName").append('<option value="'+brand[i].name+'">'+brand[i].name+'</option>');
              }

              $("#editManu").empty();
              $("#editManu").append(new Option("请选择",""))
              for(var i=0;i<firm.length;i++){
                $("#editManu").append('<option value="'+firm[i].name+'">'+firm[i].name+'</option>');
              }
              $("#editMode").empty();
              $("#editMode").append(new Option("请选择",""))
              for(var i=0;i<good.length;i++){
                $("#editMode").append('<option value="'+good[i].mode+'">'+good[i].mode+'</option>');
              }
              $("#editType").empty();
              $("#editType").append(new Option("请选择",""))
              for(var i=0;i<type.length;i++){
                $("#editType").append('<option value="'+type[i].type+'">'+type[i].type+'</option>');
              }
              form.render("select")//重新渲染 固定写法
            }
          });

          break;
        case 'save':
          if($('#amounts').val()!=null){
            $('#amounts').val($('#num').val()*$('#price').val());
            $('#amount').val(parseInt($('#amount').val())+parseInt($('#amounts').val()));
          }
          break
      }

    });
    //监听下拉框改变
    form.on('select(lczt)', function (data) {
      var selectElem = $(data.elem);
      var tdElem = selectElem.closest("td");
      var trElem = tdElem.closest("tr");
      var tableView = trElem.closest(".layui-table-view");
      table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
    });
  });
</script>
</body>
</html>
